<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>Hello H5+</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript">
			var ws = null,
				wo = null;
			var em = null,
				map = null,
				pcenter = null;
			// H5 plus事件处理
			function plusReady() {
				if (!em || ws) {
					return
				};
				// 获取窗口对象
				ws = plus.webview.currentWebview();
				wo = ws.opener();
				//高德地图坐标为(116.3974357341,39.9085574220), 百度地图坐标为(116.3975,39.9074)
				pcenter = new plus.maps.Point(116.3975, 39.9074);
				setTimeout(function() {
					map = new plus.maps.Map("map");
					map.centerAndZoom(pcenter, 12);
					createMarker();
					// 创建子窗口
					createSubview();
				}, 300);
				// 显示页面并关闭等待框
				ws.show("pop-in");
			}
			if (window.plus) {
				plusReady();
			} else {
				document.addEventListener("plusready", plusReady, false);
			}
			// DOMContentloaded事件处理
			document.addEventListener("DOMContentLoaded", function() {
				em = document.getElementById("map");
				window.plus && plusReady();
			}, false);

			function userLocation() {
				map.showUserLocation(true);
				map.getUserLocation(function(state, pos) {
					if (0 == state) {
						map.setCenter(pos);
					}
				});
			}

			function createMarker() {
				//高德地图坐标为(116.3406445236,39.9630878208), 百度地图坐标为(116.347292,39.968716
				var marker = new plus.maps.Marker(new plus.maps.Point(116.347292, 39.968716));
				marker.setIcon("/logo.png");
				marker.setLabel("HBuilder");
				var bubble = new plus.maps.Bubble("郑智谋打造最好的HTML5移动开发工具");
				marker.setBubble(bubble);
				map.addOverlay(marker);
			}

			function createSubview() {
				// 创建加载内容窗口
				var topoffset = '44px';
				if (plus.navigator.isImmersedStatusbar()) { // 兼容immersed状态栏模式
					topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 44) + 'px';
				}
				var wsub = plus.webview.create('maps_map_sub.html', 'sub', {
					top: topoffset,
					height: '60px',
					position: 'absolute',
					scrollIndicator: 'none',
					background: 'transparent'
				});
				ws.append(wsub);
			}

			function resetMap() {
				//map.centerAndZoom(pcenter,12);
				map.reset();
			}
		</script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8" />
		<style type="text/css">
			#map {
				width: 100%;
				position: fixed;
				top: 0px;
				bottom: 0px;
				line-height: 200px;
				text-align: center;
				background: #FFFFFF;
			}

			.ipos {
				background: no-repeat center center url();
				background-size: 50px 44px;
			}
		</style>
	</head>
	<body>
		<div id="map">地图加载中...</div>
	</body>
</html>
